<template>
	<view class="content">
		<view class="container">
			<view class="loadinglogo">
				<image src="../../static/img/loading.3cd179fd.png" mode="aspectFill"></image>
			</view>
		</view>
		<transition name="dialog-fade" @after-enter="afterEnter">
			<view v-if="isDialogVisible" class="wzh-dialog tol">
				<view class="wzh-dialog__box tol__box">
					<view class="" @click="close">
						<image class="wzh-dialog__close" src="../../static/img/download (1).svg" mode="aspectFill">
						</image>
					</view>
					<view class="wzh-dialog__header">
						<view class="wzh-dialog__title"></view>
					</view>
					<view class="wzh-dialog__main tol__main">
						<view class="tol__logo">
						</view>
						<view class="tol__notice">
							<text class="tol__notice">这是一封来自</text>
							<text class="fw-medium lettername">{{ letter.sign }}</text><!-- 这里是其他人信件的署名 -->
							<text>的信件，TA说…</text>
						</view>
						<view class="tol__btn tol__btn-open fw-medium" @click="openLetter(letter)">
							拆开看看
						</view>
						<view class="tol__btn tol__btn-next" @click="nextLetter">
							暂时不看，拆下一封
						</view>
					</view>
				</view>
			</view>
		</transition>
		<view class="container2">
			<view class="buttonOpenApp" @click="handleOpenAppCilck()">
				<text class="wenzi2">打开APP，向树洞说说你的心事 </text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			letter: {},
			openedLetterIds: [],
			isDialogVisible: false,
		};
	},
	mounted() {
		this.fetchRandomLetter(); // 页面加载时获取第一条信件
		const userId = uni.getStorageSync('userId') || '';
		console.log('Retrieved userId:', userId);
		this.userId = userId;
		this.showDialogAfterDelay();
	},
	methods: {
		showDialogAfterDelay() {
			setTimeout(() => {
				this.isDialogVisible = true;
				console.log('Dialog shown after delay.');
			}, 2000); // 延迟 2 秒显示对话框
		},
		handleOpenAppCilck() {
			console.log('打开下载app');
			window.open('https://sj.qq.com/appdetail/com.wwyy.wzhxl?ckey=CK1456487930531&from_wxz=1', '_blank');
		},
		close() {
			uni.redirectTo({
				url: '/pages/index/index'
			});
		},
		async fetchRandomLetter() {
			try {
				const userId = uni.getStorageSync('userId') || '';
				const response = await new Promise((resolve, reject) => {
					uni.request({
						url: `http://localhost:8080/letter/messages/random?userId=${userId}`, // 传递用户ID作为查询参数
						method: 'GET',
						success: (res) => {
							resolve(res);
						},
						fail: (err) => {
							reject(err);
						}
					});
				});

				if (response.statusCode === 200) {
					this.letter = response.data.data;
					 console.log('Fetched letter:', this.letter);
					 
					this.showDialogAfterDelay();
				} else if (response.statusCode === 204) {
					console.warn('No messages available');
				} else {
					console.error('Failed to fetch letter:', response);
				}
			} catch (error) {
				console.error('Error fetching letter:', error);
			}
		},
		openLetter(letter) {
			let openedLetterIds = uni.getStorageSync('openedLetterIds') || [];
			openedLetterIds.push(letter.messageID);
			uni.setStorageSync('openedLetterIds', openedLetterIds);

			console.log(`跳转我写的`, letter);
			uni.navigateTo({
				url: `/pages/other-write/other-write?messageId=${letter.messageID}`
			});
		},
		nextLetter() {
			this.isDialogVisible = false; // 获取新的信件
			this.fetchRandomLetter()
				.then(() => {
					this.showDialogAfterDelay();
				})
				.catch(error => {
					console.error('Error fetching next letter:', error);
				});
		},
		afterEnter(el) {
			el.style.opacity = 1; // 确保动画完成后透明度为 1
		}
	}
}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 92vh;
		background-image: url();
		background-size: cover;
		/* 保持图像的宽高比，覆盖整个容器的宽度 */
		background-position: center bottom;
		/* 将图像的底部居中对齐 */
		background-repeat: no-repeat;
		background-attachment: fixed;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.loadinglogo {
		width: 100%;
		margin: 20px 40px;
		animation: floating 2s ease infinite;
	}

	@keyframes floating {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}

		100% {
			transform: translateY(0);
		}
	}


	.buttonOpenApp {
		margin: 20rpx auto;
		display: flex;

		align-items: center;
		justify-content: center;
		width: 700rpx;
		height: 50px;
		border-radius: 30px;
		background-color: #ffca85;

	}

	.wenzi2 {
		color: #000000;
		font-weight: bold;
		font-size: 18px;
	}

	.dialog-fade-enter-active,
	.dialog-fade-leave-active {
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.dialog-fade-enter-from,
	.dialog-fade-leave-to {
		opacity: 0;
		transform: translateY(250px);
	}

	.wzh-dialog {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
		/* display: -webkit-box; */
		/* display: -webkit-flex; */
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		/* -webkit-justify-content: center; */
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		/* -webkit-align-items: center; */
		-ms-flex-align: center;
		align-items: center;
		opacity: 0;
		/* 初始状态透明 */
		transform: translateY(0);
		/* 初始状态向下偏移 */
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.tol .wzh-dialog__close {
		color: #c2bcb2;
	}

	.tol .tol__box {
		width: 300px;
		min-height: 330px;
		border-radius: 10px;
		background: #fffbea;
		/* -webkit-box-shadow: 0 .004rem .008rem 0 rgba(50, 39, 16, .3); */
		box-shadow: 0 2px 4px 0 rgba(50, 39, 16, .3);
	}

	.wzh-dialog__box {
		position: relative;
		/* display: -webkit-box; */
		/* display: -webkit-flex; */
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: column; */
		-ms-flex-direction: column;
		flex-direction: column;
		/* width: .56rem; */
		/* min-height: .12rem; */
		max-height: 90vh;
		/* border-radius: .016rem; */
		/* background-color: var(--color-bg-clear, #fff); */
	}

	.tol .wzh-dialog__close {
		color: #c2bcb2;
	}

	.wzh-dialog__close {
		position: absolute;
		right: 8px;
		top: 10px;
		z-index: 1;
		/* -webkit-box-sizing: content-box; */
		box-sizing: content-box;
		font-size: .032rem;
		font-style: normal;
		/* color: #1f1f1f; */
		width: 30px;
		height: 30px;
		background: currentColor;
		background-clip: content-box;
		/* -webkit-mask: url(data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h20v20H0z'/%3E%3Cpath d='M5.5 5.5l9 9m0-9l-9 9' stroke='%23CCC' stroke-linecap='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E); */
		/* 		    mask: url(data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h20v20H0z'/%3E%3Cpath d='M5.5 5.5l9 9m0-9l-9 9' stroke='%23CCC' stroke-linecap='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E); */
		/* -webkit-mask-position: center; */
		mask-position: center;
		/* -webkit-mask-size: contain; */
		mask-size: contain;
		background-color: transparent;
	}

	.wzh-dialog__footer,
	.wzh-dialog__header,
	.wzh-dialog__main {
		padding-left: 12px;
		padding-right: 12px;
	}

	.wzh-dialog__title {
		font-size: 17px;
		line-height: 2;
		font-weight: 600;
		text-align: center;
		color: var(--color-text-primary, #1f1f1f);
	}

	.tol .tol__main {
		padding: 20px 15px 15px;
		overflow: visible;
	}

	.wzh-dialog__main {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tol__logo {
		width: 0;
		height: 0;
		padding: 60px;
		margin: 0 auto;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		background-image: url(/static/img/logo_open_letter.092136b7.png);
	}

	.tol__notice {
		margin: 20px 0 0;
		padding: 0 10px;
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
		color: #523d14;
	}

	.fw-medium {
		font-weight: 700;
	}

	.tol__btn-open {
		width: 135px;
		height: 50px;
		margin: 30px auto 0;
		font-size: 16px;
		border-radius: 25px;
		color: #704300;
		background: -webkit-gradient(linear, left top, left bottom, from(#ffefad), to(#f4ba45));
		background: -webkit-linear-gradient(top, #ffefad, #f4ba45);
		background: -o-linear-gradient(top, #ffefad 0, #f4ba45 100%);
		background: linear-gradient(180deg, #ffefad, #f4ba45);
	}

	.tol__btn {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.tol__btn-next {
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		margin: 2px auto 0;
		padding: 10px 0;
		font-size: 14px;
		line-height: 1.05;
		color: #ad7507;
	}

	.tol__btn {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
</style>